<template>
  <view class="wai">
    <u-popup :show="isShow" :round="10" mode="bottom" @close="close">
      <view class="popup">
        <view class="zi">{{ time_kf }}</view>
        <!-- #ifdef APP -->
        <view class="phop" @click="aaa" v-if="openn == 'on'">
          <button style="background-color: #fff; display: flex; font-size: 30rpx; line-height: 100rpx" type="default" class="publish" open-type="contact">
            <u-icon size="25" color="rgb(95, 154, 192)" name="kefu-ermai"></u-icon>
            <view class="kefu">在线客服咨询</view>
          </button>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="phop" @click="gotoApply" v-if="openn == 'on'">
          <button style="background-color: #fff; display: flex; font-size: 30rpx; line-height: 100rpx" type="default" class="publish" open-type="contact">
            <u-icon size="25" color="rgb(95, 154, 192)" name="kefu-ermai"></u-icon>
            <view class="kefu">在线客服咨询</view>
          </button>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="phop" @click="wxchatkf" v-if="openn == 'on'">
          <button style="background-color: #fff; display: flex; font-size: 30rpx; line-height: 100rpx" type="default" class="publish">
            <u-icon size="25" color="rgb(95, 154, 192)" name="kefu-ermai"></u-icon>
            <view class="kefu">在线客服咨询</view>
          </button>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="phop" @click="kefu(kefu1)" v-if="kefu1 != ''">
          <u-icon size="25" color="rgb(95, 154, 192)" name="phone"></u-icon>
          <view class="kefu">在线客服电话</view>
        </view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <a v-if="kefu1 != ''" style="text-decoration: none" :href="'tel:' + kefu1">
          <view class="phop">
            <u-icon size="25" color="rgb(95, 154, 192)" name="phone"></u-icon>
            <view class="kefu">在线客服电话</view>
          </view>
        </a>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="phop" @click="kefu(business_mobile)" v-if="business_mobile != ''">
          <u-icon size="25" color="rgb(95, 154, 192)" name="phone"></u-icon>
          <view class="kefu">联系商务合作</view>
        </view>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <a style="text-decoration: none" :href="'tel:' + business_mobile" v-if="business_mobile != ''">
          <view class="phop" @click="kefu(business_mobile)">
            <u-icon size="25" color="rgb(95, 154, 192)" name="phone"></u-icon>
            <view class="kefu">联系商务合作</view>
          </view>
        </a>
        <!-- #endif -->
        <view @click="closePopup" class="zi border">取消</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { watch } from 'vue';
export default {
  options: { styleIsolation: 'shared' }, //加上这句小程序样式穿透也会有效果
  props: ['isShow'],
  data() {
    return {
      time_kf: '', //上班时间
      business_mobile: '', //商务合作电话
      kefu1: '', //客服电话
      corpId: '', //企业id
      urlkf: '', //企业客服链接
      openn: '' //企业客服开关 on=开启,off=关闭
    };
  },
  methods: {
    // 小程序打开微信客服
    wxchatkf() {
      console.log(this.openn);
      wx.openCustomerServiceChat({
        extInfo: { url: this.urlkf },
        corpId: this.corpId,
        success(res) {
          console.log(res);
        }
      });
    },

    gotoApply() {
      window.location.href = this.urlkf;
      // window.location.href = `weixin://biz/ww/profile/${encodeURIComponent('https://work.weixin.qq.com/kfid/kfcd156fd69a8331543')}`;
      // location.href = `weixin://biz/ww/profile/`;
    },
    //
    aaa() {
      let wechat = null;
      plus.share.getServices((res) => {
        wechat = res.find((i) => i.id === 'weixin');
        if (wechat) {
          wechat.openCustomerServiceChat(
            {
              corpid: this.corpId, //企业ID
              url: this.urlkf //客服地址
            },
            (src) => {
              console.log('success:', JSON.stringify(src));
            },
            (err) => {
              console.log('error:');
            }
          );
        } else {
          uni.showToast({
            title: '当前环境不支持微信操作',
            icon: 'error'
          });
        }
      });
    },
    // 拨打手机号
    kefu(mobile) {
      console.log(mobile);
      // #ifdef APP-PLUS
      uni.makePhoneCall({
        phoneNumber: mobile,
        success: function () {
          console.log('拨打电话成功！');
        },
        fail: function () {
          console.log('拨打电话失败！');
        }
      });
      // #endif
      // #ifdef MP-WEIXIN
      wx.makePhoneCall({
        phoneNumber: mobile,
        success: function () {
          console.log('拨打电话成功！');
        },
        fail: function () {
          console.log('拨打电话失败！');
        }
      });
      // #endif
    },
    getInitData() {
      var that = this;
      uni.request({
        url: that.app.apiHost + '/init',
        method: 'get',
        header: { Authorization: '' },
        success: (data) => {
          console.log('客服', data);
          this.time_kf = data.data.data.time_kf;
          this.business_mobile = data.data.data.business_mobile;
          this.kefu1 = data.data.data.kefu;
          this.openn = data.data.data.wechatKeFu.open;
          this.corpId = data.data.data.wechatKeFu.corpId;
          this.urlkf = data.data.data.wechatKeFu.url;
        }
      });
    },

    // 点击不是弹窗的地方关闭弹窗
    close() {
      this.$emit('update:isShow', false);
    },
    // 点击取消关闭弹窗
    closePopup() {
      this.getInitData();
      this.$emit('update:isShow', false);
    }
  },
  watch: {
    isShow(newVal) {
      this.getInitData();
    }
  }
};
</script>

<style scoped lang="scss">
/* 去掉按钮边框方法一 */
.publish::after {
  border: none;
}
.phop {
  .kefu {
    color: #333;
    margin-left: 10rpx;
  }
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 2rpx solid #f0f0f0;
  justify-content: center;
  display: flex;
}
.zi {
  color: #333;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  border-bottom: 2rpx solid #f0f0f0;
}
.border {
  border: none;
}
::v-deep .u-popup__content {
  margin: 0 20rpx;
}
.popup {
  font-size: 30rpx;
  // height: 500rpx;
}
</style>
